<template>
  <div>
    <v-bill-card-base v-for="bill in bills.body" :key="bill.no" :bill="bill">
      <template slot-scope="{bill}" slot="opera">
        <el-button type="text" @click="$router.push(`./detail/${bill.id}`)"><i
            class="iconfont icon-xiangqing"></i>详情</el-button>
        <el-button type="text" @click="emitRecall(`${bill.id}`)" v-if="roleType == 9"><i
            class="iconfont icon-chehui1"></i>撤回</el-button>
        <el-button type="text" @click="emitDeal(`${bill.billId}`)" v-if="bill.inquiryStatus === 2 && roleType == 9"><i
            class="iconfont icon-xiangqing"></i>交易</el-button>
      </template>
      <template slot-scope="{bill}" slot="tips">
        {{$utils.toTypeFormat(bill.inquiryStatus,roleType === 9?$dict.memberInquiryStatus:$dict.tableInquiryStatus)}}
      </template>
      <template slot-scope="{bill}" slot="expand">
        <div class="expand" v-for="offer in (bill.pzgBillQuoteDtos || bill.memberBillQuoteDtos)">
          <div class="item">
            <div class="label">报价时间</div>
            <div class="value">{{offer.createTime}}</div>
          </div>
          <div class="item">
            <div class="label">报价机构序列号</div>
            <div class="value">{{offer.quotationNumber}}</div>
          </div>
          <div class="item">
            <div class="label">最优意向贴现率</div>
            <div class="value">{{offer.optimalIntentRate}}</div>
          </div>
          <div class="item">
            <div class="label">最优转让额</div>
            <div class="value">{{offer.transferAmount}}</div>
          </div>
          <div class="item">
            <!--<el-button type="primary" v-if="roleType !== 9" @click="$emit('adjPrice',offer)">调价</el-button>-->
            <el-button type="primary" v-if="roleType !== 9 && bill.inquiryStatus === 2" @click="$router.push(`./adjust-Price/${bill.id}?quoteId=${offer.id}&billId=${bill.billId}`)">调价</el-button>
            <el-button type="primary" v-if="roleType === 9" @click="$emit('showTransInfo',offer)">交易</el-button>
          </div>
        </div>
      </template>
    </v-bill-card-base>
    <div class="operation pageation">
        <b></b>
        <el-pagination
                @current-change="change"
                :current-page="bills.footer.currentPage"
                layout="total, prev, pager, next"
                :page-size="10"
                :total="bills.footer.total">
        </el-pagination>
    </div>
    <v-plain-dialog
      title="票据详情"
      width="60%"
      ref="detail">
      <v-bill-detail :bill="currentBillDetail"/>
    </v-plain-dialog>
  </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop, Emit } from 'vue-property-decorator'

  import vBillCardBase from '@/components/bill-card-base/index.vue'
  import vPlainDialog from '@/components/plain-dialog'
  import vBillDetail from '@/components/bill-detail'

  @Component({
    components: {
      vBillCardBase, vPlainDialog, vBillDetail
    }
  })
  export default class BillCardOrder extends Vue {

    @Prop() bills
    currentBillDetail = {}

    async showBillDetail ({billId}) {
      let res: AjaxResponse = await  this.$axios.get(`b/boms/bill/${billId}`)
      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
        this.$refs.detail.openDialog()
      }
    }

    @Emit()
    change (currentPage) {
    }
    emitRecall (billId) {
      this.$emit('emitRecall',billId)
    }
    emitDeal (billId) {
      this.$emit('emitDeal',billId)
    }
    get roleType () {
      let u = JSON.parse(window.sessionStorage.getItem('userInfo'))
      if (u) {
        return u.roleType
      } else {
        return -1
      }
    }
  }
</script>
<style lang="less" scoped>
  .expand {
    height: 84px;
    display: flex;
    flex-direction: row;
    background: #F5F7FA;
    line-height: 84px;
    .item {
      flex: 1;
      div {
        line-height: 42px;
        font-size: 16px;
        text-align: center;
      }
      .label {
        color: #999;
      }
    }
  }
</style>
